extends layout
block content
    //- 表单包含<input type="file">时, enctype 必须为 multipart/form-data, method 为 post, 浏览器才能正确编码并以 multipart/form-data 格式发送表单的数据
    input#test-file-upload(type="file" name="test")
    form(method="post" action="http://localhost/test" enctype="multipart/form-data")
        p 图片预览：
        p #[#test-image-preview(style="border: 1px solid #ccc; width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;")]
        p #[input#test-image-file(type="file" name="test")]
        p#test-file-info
append scripts
    script(type="text/javascript" charset="utf-9").
        // 用 JS 对 <input type="file"> 的 value 赋值是没有任何效果的, 当用户选择了上传某个文件后, JS 也无法获得该文件的真实路径
        // 通常, 上传的文件都由后台服务器处理, JavaScript 可以在提交表单时对文件扩展名做检查, 以便防止用户上传无效格式的文件
        var f = document.getElementById('test-file-upload');
        f.addEventListener('change', function() {
            var filename = f.value;  // 'C:\\fakepath\test.png', 将真实地址隐藏了, 为了客户端的安全
            console.log(filename);
            if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
                alert('Can only upload image file.');
                return false;
            }
        });
        // HTML5 的 File API 提供了 File 和 FileReader 两个主要对象, 可以获得文件信息并读取文件
        var fileInput = document.getElementById('test-image-file'),
            info = document.getElementById('test-file-info'),
            preview = document.getElementById('test-image-preview');
        fileInput.addEventListener('change', function() {  // 监听 change 事件
            preview.style.backgroundImage = '';  // 清除背景图片
            if (!fileInput.value) {  // 检查文件是否选择
                info.innerHTML = '没有选择文件';
                return;
            }
            var file = fileInput.files[0];  // 获取 File 引用
            info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
            if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
                alert('不是有效的图片文件!');
                return;
            }
            var reader = new FileReader();  // 读取文件
            reader.onload = function(e) {  // 因为是异步操作, 所以我们在 JS 代码中就不知道什么时候操作结束, 因此需要先设置一个回调函数
                var data = e.target.result;  // '...(base64编码)...'
                preview.style.backgroundImage = 'url(' + data + ')';
            };
            reader.readAsDataURL(file);  // 以 DataURL 的形式读取文件
        });
